import { FC,useState, useEffect } from 'react';
import styles from './index.less';
import { Button, Table, Select, Input } from 'antd';
import { ReloadOutlined, GithubOutlined } from '@ant-design/icons';
import {useDispatch,useSelector,IRouteComponentProps} from 'umi'
// import {getArticale} from "@/services"
import {IArticle} from '@/utils/article'

const article:React.FC<IRouteComponentProps> = () => {
    // 表格头部
    const columns = [
        {title: '标题',dataIndex: 'title'},
        {title: '状态',dataIndex: 'state'},
        {title: '顺序',dataIndex: 'order'},
        {title: '分类',dataIndex: 'sort'},
        {title: '标签',dataIndex: 'label'},
        {title: '阅读量',dataIndex: 'views'},
        {title: '喜欢数',dataIndex: 'likes'},
        {title: '发布时间',dataIndex: 'time'},
        {title: '操作',render:()=>{
            return ( <div>
                <span style={{padding:'0 10px'}}>编辑</span>
                <span style={{padding:'0 10px'}}>首焦推荐</span>
                <span style={{padding:'0 10px'}}>查看访问</span>
                <span style={{padding:'0 10px'}}>删除</span>
            </div> )
        }},
    ];
    interface DataType {
        key: React.Key;
        name: string;
        state:string;
        order:string;
        sort:string;
        label:string;
        reading:string;
        like:string;
        time:string;
    }
    const data: DataType[] = [
        {   key: '1',
            name: 'John Brown',
            state:'1',
            order:'2',
            sort:'3',
            label:'4',
            reading:'5',
            like:'6',
            time:'7',
        },
    ];
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                'selectedRows: ',
                selectedRows,
            );
        },
        getCheckboxProps: (record: DataType) => ({
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
        }),
    };
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>(
        'checkbox',
    );
    const { Option } = Select;


    // -----------------------------------------------------------s
    let articleData = useSelector((state:{article:any})=>state.article)
    console.log(articleData.list[0],'-------------12');
    
    let dispatch = useDispatch();
    // 
    // const [articleList, setarticleList] = useState([])
    
    const [page,setPage]=useState(1);
    const [pageSize,setPageSize]=useState(12)
    useEffect(() => { 
        dispatch({
            type:'article/getlist',
            payload:{ page:1,pageSize:12 }
        })
        // getArticale().then(res=>{
        //     console.log(res.data);
        //     setarticleList(res.data)
        // })
    }, []);

    return (
        <div className={styles.article}>
            <header>工作台/所有文章</header>
            <main>
                <nav>
                    <div className={styles.one}>
                        <div>
                            <span>标题:</span>
                            <Input type="text" placeholder="请输入文章标题" />
                        </div>
                        <div>
                            <span>状态:</span>
                            <Select
                                showSearch
                                style={{ width: 150 }}
                                optionFilterProp="children">
                                <Option value="1">已发布</Option>
                                <Option value="2">草稿</Option>
                            </Select>
                        </div>
                        <div>
                            <span>分类:</span>
                            <Select
                                showSearch
                                style={{ width: 150 }}
                                optionFilterProp="children"
                            // filterOption={(input, option) =>
                            // option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            // }
                            // filterSort={(optionA, optionB) =>
                            // optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
                            // }
                            >
                                <Option value="1">前端</Option>
                                <Option value="2">后端</Option>
                                <Option value="3">阅读</Option>
                                <Option value="4">Linux</Option>
                                <Option value="5">LeetCode</Option>
                                <Option value="6">要闻</Option>
                            </Select>
                        </div>
                    </div>
                    <div className={styles.two}>
                        <Button>重置</Button>
                        <Button type="primary">搜索</Button>
                    </div>
                </nav>

                <div className={styles.con}>
                    <div className={styles.search}>
                        <ReloadOutlined className={styles.refresh} />
                        <Button type="primary">搜索</Button>
                    </div>
                    <div>
                        <Table
                            rowSelection={{
                                type: selectionType,
                                ...rowSelection,
                            }}
                            columns={columns}
                            dataSource={articleData.list[0]}
                        />
                    </div>
                </div>
            </main>
            <footer>
                <GithubOutlined />
                <p>Copyright © 2021 Designed by Fantasticit.</p>
            </footer>
        </div>
    );
}

export default article;
